<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <div class="ontent">
        <div style="text-align:right;">{{num}}%</div>
        <div class="bar">
            <input #inp type="range" id="input" (pan)="change($event)" (tap)="change($event)" [(ngModel)]="num">
        </div>
        <div class="silerbar">
            <span *ngFor="let item of items,let i = index" [style.left.%]="25 * i" class="rang" [ngStyle]="{'background-color': num > i * 25 ? '#33CE86' : '#ccc'}"></span>
        </div>
    </div>

    <span> {{locus}}%</span>
    <div class="menuBarBox" (tap)="getHost($event)" (pan)="getHost($event)" #men>
        <div class="mennBar" #menuBar></div>
        <!--<div class="rang"></div>-->
    </div>

    <button ion-button (click)="Action()">Action Sheets</button>
    <button ion-button (click)="Alert()">警告框</button>
    <button ion-button (click)="InputAlert()">输入框</button>
    <button ion-button (click)="showConfirm()">确定取消弹框</button>
    <button ion-button (click)="showRadio()">showRadio弹框</button>
</ion-content>